<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>亲密人</title>
<style type="text/css">
	

</style>
<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
<script  src="jquery/js/jquery-1.11.2.min.js"></script>
<script>
	var familiaData={
    "nodes":[
        {"id":"m-1", "age":20, "name":"Joe", "loaded":true},
        {"id":"m-2", "age":15, "name":"Fred", "loaded":true},
        {"id":"m-3", "age":16, "name":"Tom", "loaded":true},
        {"id":"m-4", "age":35, "name":"Robert", "loaded":true},
        {"id":"m-5", "age":38, "name":"Mark", "loaded":true},
        {"id":"m-6", "age":42, "name":"Jason", "loaded":true},
        {"id":"m-7", "age":37, "name":"Bill", "loaded":true},
        {"id":"m-8", "age":60, "name":"Andre", "loaded":true},
        {"id":"m-9", "age":63, "name":"Daniel", "loaded":true},
        {"id":"m-10", "age":17, "name":"Thomas", "loaded":true},
        {"id":"m-11", "age":21, "name":"Sergejs", "loaded":true},
        {"id":"m-12", "age":26, "name":"Bryon", "loaded":true},
        {"id":"m-13", "age":29, "name":"Toby", "loaded":true},

        {"id":"f-1", "age":28, "name":"Anna", "loaded":true},
        {"id":"f-2", "age":21, "name":"Wendy", "loaded":true},
        {"id":"f-3", "age":17, "name":"Dina", "loaded":true},
        {"id":"f-4", "age":26, "name":"Cate", "loaded":true},
        {"id":"f-5", "age":31, "name":"Elisa", "loaded":true},
        {"id":"f-6", "age":34, "name":"Suzie", "loaded":true},
        {"id":"f-7", "age":26, "name":"Trixie", "loaded":true},
        {"id":"f-8", "age":37, "name":"Emily", "loaded":true},
        {"id":"f-9", "age":39, "name":"Alice", "loaded":true},
        {"id":"f-10", "age":42, "name":"Violet", "loaded":true},
        {"id":"f-11", "age":32, "name":"Sara", "loaded":true},
        {"id":"f-12", "age":28, "name":"Julia", "loaded":true},
        {"id":"f-13", "age":19, "name":"Ramona", "loaded":true},
        {"id":"f-14", "age":20, "name":"Flavia", "loaded":true},
        {"id":"f-15", "age":23, "name":"Liga", "loaded":true},
        {"id":"f-16", "age":27, "name":"Jessica", "loaded":true},
        {"id":"f-17", "age":40, "name":"Barbara", "loaded":true},
        {"id":"f-18", "age":45, "name":"Hanna", "loaded":true},
        {"id":"f-19", "age":53, "name":"Giselle", "loaded":true},
        {"id":"f-20", "age":27, "name":"Mia", "loaded":true},
        {"id":"f-21", "age":19, "name":"Rose", "loaded":true},
        {"id":"f-23", "age":28, "name":"Judy", "loaded":true},
        {"id":"f-22", "age":32, "name":"Nikola", "loaded":true},
        {"id":"f-24", "age":34, "name":"Sofia", "loaded":true},
        {"id":"f-25", "age":37, "name":"Fatima", "loaded":true},
        {"id":"f-26", "age":44, "name":"Samantha", "loaded":true},
        {"id":"f-27", "age":23, "name":"Chelia", "loaded":true},
        {"id":"f-28", "age":18, "name":"Alexa", "loaded":true},
        {"id":"f-29", "age":21, "name":"Karla", "loaded":true},
        {"id":"f-30", "age":23, "name":"Karina", "loaded":true},
        {"id":"f-31", "age":51, "name":"Patricia", "loaded":true},
        {"id":"f-32", "age":47, "name":"Anna", "loaded":true},
        {"id":"f-33", "age":38, "name":"Laura", "loaded":true}
   ],

    "links":[
        {"id":"l01", "from":"m-1", "to":"f-1", "type":"friend"},
        {"id":"l02", "from":"m-1", "to":"f-2", "type":"friend"},
        {"id":"l03", "from":"m-1", "to":"f-3", "type":"friend"},
        {"id":"l04", "from":"m-1", "to":"f-4", "type":"friend"},
        {"id":"l05", "from":"m-1", "to":"f-5", "type":"friend"},

        {"id":"l07", "from":"f-1", "to":"m-2", "type":"collegue"},
        {"id":"l08", "from":"f-1", "to":"m-3", "type":"friend"},
        {"id":"l09", "from":"f-1", "to":"m-4", "type":"friend"},
        {"id":"l10", "from":"f-1", "to":"f-6", "type":"friend"},
        {"id":"l11", "from":"f-1", "to":"f-7", "type":"friend"},

        {"id":"l15", "from":"f-2", "to":"f-8", "type":"friend"},
        {"id":"l16", "from":"f-2", "to":"f-9", "type":"friend"},

        {"id":"l17", "from":"f-3", "to":"m-5", "type":"spouse"},
        {"id":"l18", "from":"f-3", "to":"m-6", "type":"collegue"},

        {"id":"l19", "from":"f-4", "to":"f-10", "type":"friend"},
        {"id":"l20", "from":"f-4", "to":"f-11", "type":"friend"},
        {"id":"l21", "from":"f-4", "to":"f-12", "type":"friend"},

        {"id":"l22", "from":"f-5", "to":"f-13", "type":"collegue"},
        {"id":"l23", "from":"f-5", "to":"f-14", "type":"collegue"},
        {"id":"l24", "from":"f-5", "to":"f-15", "type":"collegue"},
        {"id":"l25", "from":"f-5", "to":"m-7", "type":"collegue"},
        {"id":"l26", "from":"f-5", "to":"m-8", "type":"friend"},

        {"id":"l27", "from":"m-2", "to":"f-16", "type":"friend"},
        {"id":"l28", "from":"m-2", "to":"f-17", "type":"friend"},
        {"id":"l29", "from":"m-2", "to":"f-18", "type":"friend"},
        {"id":"l30", "from":"m-2", "to":"f-19", "type":"friend"},
        {"id":"l31", "from":"m-2", "to":"f-20", "type":"friend"},

        {"id":"l32", "from":"f-12", "to":"f-21", "type":"friend"},
        {"id":"l33", "from":"f-12", "to":"f-22", "type":"friend"},
        {"id":"l34", "from":"f-21", "to":"f-23", "type":"friend"},
        {"id":"l35", "from":"f-21", "to":"f-24", "type":"friend"},

        {"id":"l36", "from":"f-8", "to":"f-25", "type":"friend"},
        {"id":"l37", "from":"f-8", "to":"f-26", "type":"friend"},
        {"id":"l38", "from":"f-8", "to":"f-27", "type":"friend"}

    ]
}

</script>
</head>

<body>
<div id="demo" ></div>
<script>
		
		
	chart= new NetChart({
    "navigation": {
    	"focusNodeExpansionRadius": 1,
        "initialNodes": [
            "m-1"
        ],
        "mode": "focusnodes"
    },
    "layout": {
        "mode": "radial",
        "nodeSpacing": 30
    },
    "style": {
        "node": {
            "display": "image",
            "lineWidth": 2,
            "lineColor": "#2fc32f",
            "imageCropping": true
        },
     "nodeStyleFunction": function(node) {
			node.image = "https://zoomcharts.com/dvsl/data/net-chart/friend-net/"+node.id+".png";
			node.label = node.data.name;
}
    },
    "container": "demo",
    "data": [
        {
            //"url": "https://zoomcharts.com/dvsl/data/net-chart/friend-net.json"
			preloaded:familiaData
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})	
	
</script>
</body>
</html>
